<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root" class="root">
      <ul class="list" id="list">
        <li>全单1</li>
        <li>全部菜2单</li>
        <li>全部3单</li>
        <li>菜单4</li>
        <li>全菜单</li>
        <li>全部5菜单</li>
        <li>全6单</li>
        <li>全6部菜单</li>
        <li>全菜7单</li>
        <li>全8单</li>
        <li>全部5菜单</li>
        <li>全6单</li>
        <li>全6部菜单</li>
        <li>全菜7单</li>
        <li>全8单</li>
        <li>全9部菜单</li>
        <li>全10单</li>
        <li>全11部单</li>
        <li>菜2单</li>
        <li>全菜12单</li>
        <li>全32部菜单</li>
      </ul>
    </div>
  </body>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .root:before {
      display: block;
      content: "";
      width: 20px;
      height: 100%;
      background: rgba(111, 111, 111, 0);
      box-shadow: 2px 2px 32px 2px #999;
      position: absolute;
      right: -20px;
      top: 0;
    }
    #root {
      height: 60px;
      width: 800px;
      white-space: nowrap;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;
      position: relative;
      border-bottom: 1px solid #eee;
      padding-right: 20px;
      background-color: #f5f5f5;
      margin-left: 100px;
      margin-top: 50px;
    }
    .root:before {
      display: block;
      content: "";
      width: 20px;
      height: 100%;
      background: rgba(111, 111, 111, 0);
      box-shadow: 2px 2px 32px 2px #999;
      position: absolute;
      right: -20px;
      top: 0;
    }
    .list {
      position: absolute;
      left: 0;
      top: 0;
      /*width: 100%;*/ /*不能为100%，不然宽度只有父容器的宽度，我掉进这个坑了。*/
      transition: all 1s;
      height: 100%;
      line-height: 2.5;
    }
    .on {
      color: red;
      font-weight: bold;
    }
    .off {
      color: #000;
      font-weight: normal;
    }
    .list li {
      display: inline-block;
      padding: 10px 20px;
      cursor: pointer;
    }
  </style>
  <script>
    var box = document.getElementById("root"); //外面的容器。
    var listBox = document.getElementById("list"); //ul列表。主要是移动它的left值
    var list = document.getElementsByTagName("li"); //所有列表元素
    var width = box.clientWidth / 2; //为了判断是左滑还是右滑
    console.log(box);
    var totalWidth = 0;
    for (let i = 0; i < list.length; i++) {
      totalWidth = totalWidth + list[i].offsetWidth; //所有列表元素的总宽度
    }
    for (let i = 0; i < list.length; i++) {
      var _offset = totalWidth - box.clientWidth; //右边的偏移量
      list[i].addEventListener("click", function (e) {
        for (let j = 0; j < list.length; j++) {
          list[j].className = "off"; //移除所有元素的样式
        }
        list[i].className = "on"; //给点击的元素添加样式
        var offset =
          totalWidth - (Math.abs(listBox.offsetLeft) + box.clientWidth) + 100; //右边的偏移量 = 所有元素宽度之和 - （ul容器的左偏移量 + 父容器的宽度）
        if (e.pageX > width && offset > 0) {
          //点击右侧并且右侧的偏移量大于0，左滑。
          listBox.style.left = listBox.offsetLeft - 200 + "px";
        } else if (e.pageX > width && offset > 200) {
          //临界位置，，右侧滚动到末尾
          listBox.style.left = -_offset + "px";
        }
        if (e.pageX < width && listBox.offsetLeft < -200) {
          //点击左侧并且左侧的偏移量小于0，左滑。
          listBox.style.left = listBox.offsetLeft + 200 + "px";
        } else if (e.pageX < width && listBox.offsetLeft < 0) {
          //临界位置，左侧滚到开始的位置
          listBox.style.left = 0;
        }
      });
    }
  </script>
</html>
